<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_分区元素</title>
</head>
<body>
<!--  行内分区元素 不会换行 用于选中一行中的一部分内容  -->
    今天是冬至,你吃<span style="color:red;">饺子/汤圆</span>了吗?
    欢迎各位同学进入<span style="color: green;">JSDTN2410</span>班级学习<span style="color: blue;">第三阶段</span>的课程!
<br>
    <!--块级分区元素 独占一行 div作为典型代表,默认宽度为父级宽度的100%,高度为0靠内容撑起来-->
    <div></div>
<br>
    <div class="header">顶部条</div>
    <div class="nav">导航栏</div>
    <div class="main">主体内容</div>
    <div class="section">区块章节</div>
    <div class="aside">侧边栏</div>
    <div class="article">文章内容</div>
    <div class="footer">页脚</div>
    <hr>
    <header>顶部条</header>
    <nav>导航栏</nav>
    <main>主体内容</main>
    <section>区块章节</section>
    <aside>侧边栏</aside>
    <article>文章内容</article>
    <footer>页脚</footer>
</body>
</html>